<!-- 文档中心右侧目录，最多显示 3 级目录 -->
<template>
  <div class="flex flex-col mt-2">
    <a
      v-for="(item, index) in list"
      :key="index"
      class="block p-1 pl-4 text-[#666666] hover:text-primary font-base"
      :href="genTitleHref(item.title)"
    >
      {{ item.title }}
      <DocDirectoryItem
        v-if="item.children?.length"
        :list="item.children"
        :level="level + 1"
      />
    </a>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineProps } from "vue";

interface DocDirectoryData {
  title: string;
  children?: DocDirectoryData[];
}

defineOptions({
  name: "DocDirectoryItem",
});

const props = defineProps<{
  list: DocDirectoryData[];
  level: number;
}>();

/**
 * 根据 title 生成 a 标签的 href
 * 如果有 . ，清除
 * 如果有空格，替换为 -
 * 全部转为小写
 * */
function genTitleHref(title: string) {
  return `#${title.toLowerCase().replace(/\./g, "").replace(/\s/g, "-")}`;
}
</script>
